<template>
  <div class="semi-bar-chart-root">
    <div class="chart-wrapper33" ref="chartRef"></div>
    <div class="legend-wrapper">
      <div
        v-for="(item, i) in chartData"
        :key="item.name"
        class="legend-item"
      >
        <span
          class="legend-dot"
          :style="{ background: colorList[i % colorList.length] }"
        ></span>
        <span class="legend-name">{{ item.name }}</span>
        <span class="legend-value">{{ item.value }}<span class="legend-percent">%</span></span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'SemiBarChart',
  props: {
    chartData: {
      type: Array, // [{name: '其他', value: 8}, ...]
      required: true
    }
  },
  data() {
    return {
      colorList: ['#2de3f7', '#ffb21a', '#2ec6a6', '#a18fff']
    };
  },
  mounted() {
    this.initChart();
  },
  watch: {
    chartData: {
      handler: 'initChart',
      deep: true
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.chartRef) return;
      if (this.chart) this.chart.dispose();
      this.chart = echarts.init(this.$refs.chartRef);

      const max = 100;
      const barWidth = 100; // 线条更宽
      const radiusArr = ['70%', '100%'];
      const centerArr = ['38%', '70%'];

      // 虚线网格层数
      const gridCount = 4;
      const gridSeries = Array.from({ length: gridCount }, (_, i) => ({
        type: 'gauge',
        radius: `${70 + i * 7.5}%`,
        center: centerArr,
        startAngle: 180,
        endAngle: 0,
        splitNumber: 1,
        axisLine: {
          lineStyle: {
            color: [[1, 'rgba(255,255,255,0.15)']],
            width: 1,
            type: 'dashed'
          }
        },
        pointer: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        detail: { show: false },
        title: { show: false },
        z: 1
      }));

      this.chart.setOption({
        backgroundColor: 'transparent',
        polar: {
          radius: radiusArr,
          center: centerArr
        },
        angleAxis: {
          max: max,
          startAngle: 180,
          show: false
        },
        radiusAxis: {
          type: 'category',
          data: this.chartData.map(item => item.name),
          z: 10,
          show: false
        },
        series: [
          ...gridSeries,
          {
            type: 'bar',
            data: this.chartData.map((item, i) => ({
              value: item.value,
              itemStyle: { color: this.colorList[i % this.colorList.length] }
            })),
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth, // 线条更宽
            z: 2
          }
        ],
        tooltip: {
          show: true,
          formatter: params => `${params.name}: ${params.value}%`
        }
      });
    }
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose();
  }
};
</script>

<style scoped>
.semi-bar-chart-root {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 260px;
  background: transparent;
}
.chart-wrapper33 {
  width: 70%;
  height: 100%;
  min-width: 320px;
  background: transparent;
}
.legend-wrapper {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.legend-name {
  color: #bfc9e6;
  font-size: 16px;
  margin-right: 8px;
}
.legend-value {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
}
.legend-percent {
  font-size: 16px;
  font-weight: normal;
}
</style> 